<template>
  <div>
    <el-container class="main">
      <el-aside width="200px">
        <br />
        <img
          src="../../assets/asidelogo3.png"
          style="width: 80%; height: 70px"
        />
        <el-menu
          background-color="rgb(209, 218, 232)"
          text-color="#111"
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          router
        >
          <el-menu-item index="/admin">
            <i class="el-icon-edit"></i>
            <span slot="title">器材管理</span>
          </el-menu-item>
          <el-menu-item index="/admin/UserList">
            <i class="el-icon-document"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="/admin/LendRecord">
            <i class="el-icon-s-order"></i>
            <span slot="title">借出记录</span>
          </el-menu-item>
          <el-menu-item index="/admin/ApplyMsg">
            <i class="el-icon-chat-line-square"></i>
            <span slot="title">申请消息</span>
          </el-menu-item>
          <el-menu-item index="/admin/DataUse">
            <i class="el-icon-notebook-1"></i>
            <span slot="title">数据使用</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="60px">
          <el-tag
            type="success"
            style="position: relative; left: -340px; top: -25px; font-size: 15px"
            >管理员</el-tag
          >

          <sapn
            style="
              font-size: 30px;
              font-family: 仿宋;
              font-weight: bold;
              width: 20px;
              position: relative;
              top: -23px;
            "
            ><img
              src="../../assets/logoa.png"
              style="width: 5%; height: 60px; position: relative; top: 22px"
            />
            实验室物品管理系统</sapn
          >
          <el-button
            @click="logout()"
            type="danger"
            plain
            round
            style="
              font-family: 楷书;
              font-size: 15px;
              position: relative;
              left: 340px;
              top:-25px
              
            "
            >退出登录</el-button
          >
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  height: 100%;
  font-size: 20px;
}

.el-aside {
  color: #333;
  background-color: rgb(209, 218, 232);
}

.el-header {
  color: #333;
  background-color: rgb(255, 255, 255);
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-menu {
  border-right: 0px;
}

.el-menu-item {
  padding: 0px 20px;
}

.el-menu-item:hover {
  background-color: rgb(184, 192, 204) !important;
}
</style>
   
  
<script>
export default {
  data() {
    return {
      host: "http://localhost:8085",
    };
  },
  mounted() {
    window.history.forward(1);
  },
  methods: {
    logout() {
      this.$confirm("确定退出吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get(this.host + "/logout").then((resp) => {
            this.$message({
              type: "success",
              message: "退出登录成功",
            });
            setTimeout(function () {
              location.href = "/";
              sessionStorage.setItem("activeIndex", 1);
            }, 500);
          });
        })
        .catch(() => {});
    },
  },
};
</script>